
<!DOCTYPE html>
<%@page import="com.blindnetworking.MailUtil"%>
<%@page import="com.blindnetworking.DBUtil"%>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Blind Dating</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="../assets/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #f5f5f5;
      }

      .form-signin {
        max-width: 500px;
        padding: 19px 29px 29px;
        margin: 0 auto 20px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                box-shadow: 0 1px 2px rgba(0,0,0,.05);
      }
      .form-signin .form-signin-heading,
      .form-signin .checkbox {
        margin-bottom: 10px;
      }
      .form-signin input[type="text"],
      .form-signin input[type="password"] {
        font-size: 16px;
        height: auto;
        margin-bottom: 15px;
        padding: 7px 9px;
      }

    </style>
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="../assets/ico/favicon.ico">
  </head>

  <body>

	<div style="text-align: center; width: 100%;">
		<img src="../assets/img/osn.png" alt=""/>
		<h1 id="title">Blind Networking</h1> 
		<h3>@devfestportugal</h3>
		<p style="font-size: 18px;">A new concept of networking.</p>
	</div>

	<div class="" style="margin: 60px auto; width:500px;">
		<h4 class="small">How it works:</h4>
		<p style="color: #444">The aim of this initiative is to promote networking opportunities between all the participants of an event.</p>
		<ul style="list-style: none;">
			<li>
				<p><span class="icon-ok-sign" style="font-weight:bold;"></span> Register in the form below</p>
			</li>
			<li>
				<p><span class="icon-ok-sign" style="font-weight:bold;"></span> You will start receiving invitations for blind dates on your email</p>
			</li>
			<li>
				<p><span class="icon-ok-sign" style="font-weight:bold;"></span> Confirm your availability on the proposed time</p>
			</li>
			<li>
				<p><span class="icon-ok-sign" style="font-weight:bold;"></span> Show up on the specified time and place to meet your partner</p>
			</li>
			<li>
				<p><span class="icon-ok-sign" style="font-weight:bold;"></span> Hook up and Network!</p>			
			</li>
		</ul>
	
	</div>

<%

String name = request.getParameter("name");
String email = request.getParameter("email");
String twitter = request.getParameter("twitter");
String wear = request.getParameter("wear");
boolean submit = request.getParameter("submit") != null;

String error = null;
boolean userSaved = false;

if (submit){
	if (name == null || name.equals("")){
		error = "Please enter your name.";
	}else if (email == null || email.equals("") || MailUtil.isValidEmailAddress(email)){
		error = "Please enter a valid email.";
	}else if (wear == null || wear.equals("")){
		error = "Please describe what are you wearing today.";
	}
	
	if (error == null){
		userSaved = DBUtil.createNewUser(name, email, twitter, wear);
	}
}

%>




    <div class="register">

<% if (!userSaved) { %>

      <form class="form-signin" action="/" method="post">
        <h2 class="form-signin-heading">Register</h2>
        <p class="form-signin-heading">You will be contacted to participate in blind networking dates.</p>
        
        <% if (error != null){ %>
        <div class="alert alert-error" style="margin: 10px 0 20px 0;"><%= error %></div>
        <% } %>
        
        <input type="text" class="input-block-level" placeholder="Your first name" name="name" value="<%= name!=null?name:"" %>">
        <input type="text" class="input-block-level" placeholder="Email" name="email" value="<%= email!=null?email:"" %>">
        <input type="text" class="input-block-level" placeholder="Twitter username" name="twitter" value="<%= twitter!=null?twitter:"" %>">
        <input type="text" class="input-block-level" placeholder="What are you wearing today?" name="wear" value="<%= wear!=null?wear:"" %>">
        <button class="btn btn-large btn-primary" type="submit" name="submit">Hook me up, please!</button>
      </form>

<% }else { %>
	<div class="alert alert-success" style="width: 600px; margin: 0 auto; text-align: center;"> You are now registered. Please check your email for more information. </div>
<% } %>



    </div>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap.min.js"></script>

<% if (submit){ %>
<script type="text/javascript">
	$(document).ready(function(){
		$(window).scrollTop($(document).height());
	})
</script>
<% } %>


  </body>
</html>
